<template>
  <goods-sku-popup :value="value" ref="skuPopup" @input="onChangeValue" border-radius="20" :localdata="goodsInfo" :mode="skuMode"
    :maskCloseAble="true" @open="openSkuPopup" @close="closeSkuPopup" @add-cart="addCart" @buy-now="buyNow"
    buyNowText="立即购买" />
</template>

<script>
  import GoodsSkuPopup from '@/components/goods-sku-popup'

  export default {
    components: {
      GoodsSkuPopup
    },
    model: {
      prop: 'value',
      event: 'input'
    },
    props: {
      // true 组件显示 false 组件隐藏
      value: {
        Type: Boolean,
        default: false
      },
      // 模式 1:都显示 2:只显示购物车 3:只显示立即购买
      skuMode: {
        type: Number,
        default: 1
      },
      // 商品详情信息
      goods: {
        type: Object,
        default: {}
      }
    },

    data() {
      return {
        goodsInfo: {}
      }
    },

    created() {
      const app = this
      const { goods } = app
      app.goodsInfo = {
        _id: goods.id,
        name: goods.goods_name,
        goods_thumb: app.goods.skuList[0].url,
        sku_list: app.getSkuList(),
        spec_list: app.getSpecList()
      }
    },

    methods: {

      // 监听组件显示隐藏
      onChangeValue(val) {
        this.$emit('input', val)
      },

      // 整理商品SKU列表
      getSkuList() {
        const app = this
        const { goods: { goods_name, goods_image, skuList } } = app
        const skuData = []
        skuList.forEach(item => {
          skuData.push({
            _id: item.id,
            goods_sku_id: item.id,
            goods_id: item.goodsId,
            goods_name: goods_name,
            image: item.url ? item.url : goods_image,
            price: item.price * 100,
            stock: item.number,
            spec_value_ids: item.spec_value_ids,
            sku_name_arr: app.getSkuNameArr(item.specifications)
          })
        })
        return skuData
      },

      // 获取sku记录的规格值列表
      getSkuNameArr(valueList) {
        const app = this
        const defaultData = ['默认']
        const skuNameArr = []
        if (valueList) {
          valueList.forEach((val, groupIndex) => {
            const specValueName = val
            skuNameArr.push(specValueName)
          })
        }
        return skuNameArr.length ? skuNameArr : defaultData
      },

      // 整理规格数据
      getSpecList() {
        const { goods: { specList } } = this
        const defaultData = [{ name: '默认', list: [{ name: '默认' }] }]
        const specData = []
        specList.forEach(group => {
          const children = []
          group.valueList.forEach(specValue => {
            children.push({ name: specValue.value })
          })
          specData.push({
            name: group.name,
            list: children
          })
        })
        return specData.length ? specData : defaultData
      },

      // sku组件 开始-----------------------------------------------------------
      openSkuPopup() {
        this.$refs.skuPopup.selectSku({
          sku:[this.goodsInfo.sku_list[0].sku_name_arr[0]],
          num:1
        });
      },

      closeSkuPopup() {
        // console.log("监听 - 关闭sku组件")
      },
    // 加入购物车按钮
      addCart(selectShop) {
        const app = this
        const { goods_id, goods_sku_id, buy_num } = selectShop;
        const params = {
          goodsId: goods_id,
          productId: goods_sku_id,
          number: buy_num
        }
        this.$request.post('wx/cart/add', params).then(r => {
          app.$toast('加入购物车成功');
          app.onChangeValue(false)
        }).catch(err=>{
          app.$toast(err.errmsg)
        })
      },
      // 立即购买
      buyNow(selectShop) {
        // 跳转到订单结算页
        this.$navTo('page_work/checkout/index', {
          mode: 'buyNow',
          goodsId: selectShop.goods_id,
          goodsSkuId: selectShop.goods_sku_id,
          goodsNum: selectShop.buy_num
        })
        // 隐藏当前弹窗
        this.onChangeValue(false)
      }

    }
  }
</script>

<style lang="scss" scoped>

</style>
